<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jsx练习</title>
  </head>

  <body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      /* 
			一定注意区分：【js语句(代码)】与【js表达式】
					1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
								下面这些都是表达式：
										(1). a
										(2). a+b
										(3). demo(1)
										(4). arr.map() 
										(5). function test () {}
					2.语句(代码)：
								下面这些都是语句(代码)：
										(1).if(){}
										(2).for(){}
										(3).switch(){case:xxxx}
		
	*/

      const date = ["Angular", "React", "Vue"];
      const VDOM = (
        <div>
          <h1>前端框架列表</h1>
          <ul>
            {date.map((item, index) => {
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
      );

      ReactDOM.render(VDOM, document.getElementById("test"));
    </script>
  </body>
</html>
